// 品牌字母检索
<template>
  <div>
    <div class="seach">
      <el-input size="mini" placeholder="请输入品牌名称关键字！" v-model="value"></el-input>
      <el-button
        type="primary"
        size="mini"
        icon="el-icon-search"
        @click="seach"
        :loading="loading"
        :disabled="value ? false : true"
      >搜 索</el-button>
    </div>

    <ul>
      <span class="title">首字母检索：</span>
      <li
        v-for="(item,index) in Alphabet"
        :key="index"
        :class=" index == color ? 'active' : '' "
        @click="selectColor(item,index)"
      >{{ item }}</li>
    </ul>

    <ol v-loading="contentLoading">
      <template v-if="brand">
        <li v-for="item in brand" :key="item.id" @click="jumpDetails(item.id)" >{{ item.brand_title }}</li>
      </template>
      
      <no-data v-else :msg="msg"/>
    </ol>
    
  </div>
</template>
<script>
export default {
  name: "Alphabet",

  data() {
    return {
      loading: false,
      contentLoading: false,
      show: true,
      value: "",
      color: 18,
      Alphabet: [..."ABCDEFGHIJKLMNOPQRSTUVWXYZ".split(''), '0~9'],
      brand: [],
      msg: '暂无相关数据...'
    }
  },
  methods: {

    async seach() {
      this.loading = true
      this.contentLoading = true
      let blurry = this.value
      let res = await this.$http({
        method: "post",
        url: "index/Api/blurryFindBrand",
        data: {
          blurry
        }
      })
      if (res.data.State.Code == 200) {
        this.brand = res.data.data
        this.loading = false
        this.contentLoading = false
      }
      // console.log(res)
    },

    async selectColor(Letter, index) {
      this.contentLoading = true
      this.color = index
      let res = await this.$http({
        method: "post",
        url: "index/Api/strFindBrand",
        data: {
          letter: Letter
        }
      })
      if (res.data.State.Code == 200) {
        // console.log(res)
        this.brand = res.data.data
        this.contentLoading = false

      }
    },

    // 跳转
    jumpDetails(id) {
      this.$router.push({
        name: "brandDetails",
        params: {
          id
        }
      })
    }

  },

  // 初始化品牌的数据
  mounted() {
    this.selectColor('A', 0)
  }
}
</script>
<style lang="scss" scoped>
.seach {
  display: flex;
  flex-direction: row;
  background-color: #f8f8f8;
  padding: 10px 20px;
  border-left: 1px solid #e3e3e3;
  border-right: 1px solid #e3e3e3;
  border-bottom: 1px solid #e3e3e3;
  .el-input {
    width: 260px;
    /deep/ .el-input__inner {
      border-radius: 0px;
    }
  }
  .el-button,
  .el-button--small {
    border-radius: 0px;
  }
}
ul {
  display: flex;
  flex-direction: row;
  align-items: center;
  border-left: 1px solid #e3e3e3;
  border-right: 1px solid #e3e3e3;
  .title {
    padding-left: 20px;
    line-height: 46px;
    color: #4e4e4e;
  }
  li {
    padding: 3px 9px;
    border-radius: 3px;
    margin: 0 6px;
    color: #4e4e4e;
    cursor: pointer;
    user-select: none;
    transition: all ease-in-out 0.3s;
    &:hover {
      color: #ffffff;
      background: #409eff;
    }
  }
  .active {
    color: #ffffff;
    background: #409eff;
  }
}
ol {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  padding: 34px;
  border: 1px solid #e3e3e3;
  div {
    width: 100%;
    color: #f3d29c;
    font-size: 80px;
    text-align: center;
  }
  li {
    min-width: 156px;
    padding: 15px 9px;
    margin: 13px 25px;
    text-align: center;
    cursor: pointer;
    user-select: none;
    border-radius: 5px;
    border: 1px solid #ccc;
    color: #333;
    transition: all 0.3s ease-in;
    letter-spacing: 0.5px;
    &:hover {
      color: #409eff;
      border: 1px solid #409eff;
    }
  }
  p {
    width: 100%;
    font-size: 60px;
    text-align: center;
    line-height: 200px;
    color: rgb(255, 172, 64);
  }
}
</style>
